"use strict";
var rian;
(function (rian) {
    var c = document.getElementById("canvas-club");
    var ctx = c.getContext("2d"); //获取canvas上下文
    var w = (c.width = window.innerWidth);
    var h = (c.height = window.innerHeight); //设置canvas宽、高
    var clearColor = "rgba(0, 0, 0, .1)"; //画板背景,注意最后的透明度0.1 这是产生叠加效果的基础
    function random(min, max) {
        return Math.random() * (max - min) + min;
    }
    class RainDrop {
        x; //涟漪x坐标
        y;
        color;
        vy; ///雨滴下落速度
        hit; //下落的最大值
        size;
        constructor(x, y, color, vy, hit, size) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.vy = vy;
            this.hit = hit;
            this.size = size;
        }
        init() {
            this.x = random(0, w); //雨滴的位置x
            this.y = 0; //雨滴的位置y
            this.color = "hsl(180, 100%, 50%)"; //雨滴颜色 长方形的填充色
            this.vy = random(4, 5); //雨滴下落速度
            this.hit = random(h * 0.8, h * 0.9); //下落的最大值
            this.size = 2; //长方形宽度
        }
        draw() {
            if (this.y < this.hit) {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.size, this.size * 30); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
            }
            this.update(); //更新位置
        }
        update() {
            if (this.y < this.hit) {
                this.y += this.vy; //未达到底部，增加雨滴y坐标
            }
            else {
                this.init();
            }
        }
    }
    const drops = []; //初始化一个雨滴
    for (let index = 0; index < 30; index++) {
        setTimeout(function () {
            var r = new RainDrop(random(0, w), 0, "hsl(180, 100%, 50%)", random(4, 5), random(h * 0.8, h * 0.9), 2);
            r.init();
            drops.push(r);
        }, index * 200);
    }
    function anim() {
        ctx.fillStyle = clearColor; //每一帧都填充背景色
        ctx.fillRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
        for (var i in drops) {
            drops[i].draw();
        }
        requestAnimationFrame(anim); //控制动画帧
    }
    //启动动画
    anim();
})(rian || (rian = {}));
